<template>
    <div>
        <el-dialog v-dialogDrag :visible.sync="textDivDialogVisible.v" width="65%" title="添加文本">
            <div class="content">
                <el-col :span="8">
                    <div>
                        <p>选择数据： </p>
                        <el-select
                                v-model="value" clearable placeholder="请选择添加数据">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <p style="margin-top: 20px">选择值类型：</p>
                        <el-select
                                v-model="typeData" clearable placeholder="请选择X轴">
                            <el-option
                                    v-for="item in fieldOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <el-button @click="load" type="primary" plain style="height:40px;width:28.5%;margin-top: 40px;">
                        加载
                    </el-button>
                    <el-button @click="submit" type="success" plain style="height:40px;width:28.5%;margin-left: 20px">
                        确定
                    </el-button>
                </el-col>
                <div id="textC" style="height: 400px;width: auto"></div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: "",
        data(){
            return{
                typeData:'',
                value:'',
                fieldOption:[{
                    value: 'mean',
                    label: '平均值'
                }, {
                    value: 'max',
                    label: '最大值'
                }, {
                    value: 'min',
                    label: '最小值'
                }, {
                    value: 'std',
                    label: '方差'
                }],
                options:[{
                    value: 'tianQi',
                    label: '天气数据'
                }, {
                    value: 'jiaoTong',
                    label: '交通数据'
                }],
                serids:[],
                yiData:{},
            }
        },
        props: {
            textDivDialogVisible: Object,
        },
        methods:{
            changeDataFields(){
            },
            load(){
                const textDivDialog = echarts.init(document.getElementById('textC'));
                //清空画布
                textDivDialog.clear();
                textDivDialog.setOption(this.yiData,true);
                window.addEventListener('resize', function () {
                    textDivDialog.resize()
                });
            },
            submit(){

            }
        },
        created(){
            let that = this;
            this.$Bus.$on('textDivDialogVisible.v', (e) => {
                that.textDivDialogVisible.v = e;
            });
        },
        watch:{
            value:function () {
                console.log(this.value)
                if(this.value == 'tianQi' ){
                    this.yiData = {
                        tooltip : {
                            formatter: "{a} <br/>{b} : {c}%"
                        },
                        toolbox: {
                            feature: {
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [
                            {
                                name: '气温',
                                type: 'gauge',
                                detail: {formatter:'{value}·C'},
                                data: [{value: 2, name: '摄氏度'}]
                            }
                        ]
                    };
                }else if(this.value == 'jiaoTong'){
                    this.yiData = {
                        tooltip : {
                            formatter: "{a} <br/>{b} : {c}%"
                        },
                        toolbox: {
                            feature: {
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [
                            {
                                name: '车流量',
                                type: 'gauge',
                                detail: {formatter:'{value}/辆'},
                                data: [{value: 2, name: '辆'}]
                            }
                        ]
                    };
                }
            }
        }
    }
</script>

<style>

</style>